<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="onClose"
  >
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="详细信息">
        <detail-info-tab ref="detailInfoTab" :record="model"></detail-info-tab>
      </a-tab-pane>
      <a-tab-pane key="2" tab="流水明细">
        <flow-details-tab ref="flowDetailsTab" :record="model"></flow-details-tab>
      </a-tab-pane>

    </a-tabs>
  </a-drawer>
</template>

<script>

  import detailInfoTab from "./tab/detailInfoTab";
  import flowDetailsTab from "./tab/flowDetailsTab";

  export default {
    name: "accountDetailModal",
    components:{
      detailInfoTab,flowDetailsTab
    },
    data() {
      return {
        visible: false,
        title: "",
        model: {},
        width: '100%'
      }
    },
    methods: {
      //切换选项卡时调用
      callback(key) {
        //console.log(key);
      },
      showDrawer(record) {
        this.visible = true;
        this.model = record;
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>